<style>
    .ellipsis-1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="find-app" id="app">
    <!-- public-head -->
    <div class="header-mobile">
        <a class="nav-back" href="javascript:history.go(-1)">
            <img class="icon" src="__CDN__/assets/img/return@2x.png" alt="">
        </a>
        <h1 class="nav-title">发布</h1>
    </div>
    <!-- main -->
    <div class="main-wrapper">
        <div class="my-publish-wrapper">
            <div class="find-out-wrapper">
                <div class="section-floor">
                    <textarea maxlength="100" class="textarea" placeholder="请输入你找到了的简单描述" name="" id="" cols="30" rows="10"
                        v-model="field.content"></textarea>
                </div>
                <div class="section-floor">
                    <div class="upload-wrapper">
                        <p class="title">失物或失踪人照片上传</p>
                        <div class="gallery-bar">
                            <label v-if="field.images.length<3" class="upload-control" for="upload">
                                    <img class="img" src="__CDN__/assets/img/add@2x.png" alt="">
                                    <input ref="anchorUpload" id="upload" type="file" accept="image/*" @change="uploadPicture">
                                </label>
                            <div v-for="(item,index) in field.images" class="gallery-item">
                                <img class="img" :src="item" alt="">
                                <img @click="removeImages(index)" class="close-btn" src="__CDN__/assets/img/close.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-floor">
                <div class="form-panel">
                    <div class="input-wrapper">
                        <label class="label" for="">类型</label>
                        <div class="input">
                            <label for=""> <input type="radio" v-model="field.type" value="3" checked name="fruit"
                                    @click="getPageData(3)">找物</label>
                            <label for=""> <input type="radio" name="fruit" v-model="field.type" value="2"
                                    @click="getPageData(2)">找人</label>
                            <label for=""> <input type="radio" name="fruit" v-model="field.type" value="1"
                                    @click="getPageData(1)">失物招领</label>
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label class="label" for="">联系人</label>
                        <input class="input" placeholder="请输入联系人" autofocus="autofocus" v-model="field.contacts" type="text">
                    </div>
                    <div class="input-wrapper">
                        <label class="label" for="">联系电话</label>
                        <input class="input" maxlength="11" placeholder="请输入手机号码" v-model="field.iphone" type="tel">
                    </div>
                    <div class="input-wrapper">
                        <div>
                            <label v-if="field.type == 1" class="label" for="">报酬</label>
                            <label v-else class="label" for="">赏金</label>
                        </div>
                        <input class="input" placeholder="请输入悬赏金额" v-model="field.money" type="number">
                    </div>
                    <div class="input-wrapper">
                        <label class="label" for="">发布周期</label>
                        <div class="input">
                            <label for=""> <input type="radio" v-model="field.cycle" value="1" checked
                                    name="cycle">30天</label>
                            <label for=""> <input type="radio" v-model="field.cycle" name="cycle" value="2">永久</label>
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label class="label" for="labelMap">丢失位置</label>
                        <div id="labelMap" class="input ellipsis-1" @click="isShowMap = true">
                            {{field.detailedaddress?field.detailedaddress:'点击选择位置'}}</div>
                    </div>
                </div>
            </div>
            <div class="section-line-space"></div>
            <div class="section-floor">
                <div class="rule-wrapper">
                    <div class="title">发布规则：</div>
                    <div v-html="site" class="desc"></div>
                    <div class="btn-wrapper">
                        <div v-if="field.type == 1" class="btn" @click="submit()">立即发布</div>
                        <div v-else class="btn" @click="submit()">立即支付并发布</div>
                    </div>
                    <p class="permit">托管赏金由第三方“招商银行”托管使用</p>
                </div>
            </div>
        </div>
    </div>
    <div v-if="isShowMap" class="map-wrapper">
        <iframe id="mapPage" width="100%" height="100%" frameborder=0
            src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=K4ZBZ-DO7R4-RJ6UW-XR5SL-WL3FQ-EWBVR&referer=myapp&radius=100&total=5">
        </iframe>
    </div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=K4ZBZ-DO7R4-RJ6UW-XR5SL-WL3FQ-EWBVR"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="__CDN__/assets/js/exif.js"></script>
<script src="__CDN__/assets/js/base64image.js"></script>
<script>
    wx.config( <?php echo $js->config(array('getLocation', 'chooseWXPay'), false) ?> );
    $(function () {
        let index = new Vue({
            el: '#app',
            data: {
                isShowMap: false,
                list: [],
                jumpDomain: '',
                loading: false,
                site: '',
                mapAdress: {},
                field: {
                    type: 3,
                    content: '',
                    images: [],
                    money: '',
                    cycle: 1,
                    contacts: '',
                    iphone: '',
                    detailedaddress: '',
                    address: '',
                    province: '',
                    city: '',
                    area: '',
                    longitude: 0,
                    latitude: 0,
                    id: 0
                }
            },
            created() {
                // this.jumpDomain = "{:url('index/detail')}"
            },
            mounted() {
                this.getPageData(3)
                // this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
            },
            methods: {
                removeImages(index) {
                    this.field.images.splice(index, 1);
                },
                getPageData(type) {
                    axios({
                        method: "post",
                        url: "{:url('user/publish')}",
                        data: {
                            RequestName: 'ajax',
                            type: type

                        },
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }).then(res => {
                        console.log(res.data.data)
                        if (res.data.code === 1) {
                            this.site = res.data.data
                        }
                    })
                },
                submit(index) {
                    let self = this
                    if (self.field.money <= 0) {
                        self.$messagebox('必须输入金额')
                        return false;
                    }
                    if (self.field.money < 0.01) {
                        self.$messagebox('输入金额必须大于0.01')
                        return false;
                    }
                    axios({
                        method: "post",
                        url: "{:url('user/publish')}",
                        data: this.field,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }).then(res => {
                        console.log(res.data.data)
                        if (res.data.code == 1) {
                            self.field.id = res.data.data.id
                            this.$messagebox({
                                title: res.data.msg
                            }).then(rest => {
                                if (rest === 'confirm') {
                                    if (self.field.type == 2 || self.field.type == 3) {
                                        var data = res.data.data;
                                        wx.chooseWXPay({
                                            timestamp: data.timestamp,
                                            nonceStr: data
                                                .nonceStr, // 支付签名随机串，不长于 32 位
                                            package: data.package,
                                            signType: data.signType,
                                            paySign: data.paySign, // 支付签名
                                            success: function (res) {
                                                console.info(res)
                                                // 支付成功后的回调函数
                                                if (res.errMsg ==
                                                    "chooseWXPay:ok") {
                                                    axios({
                                                        method: "post",
                                                        url: "{:url('user/publish')}",
                                                        data: {
                                                            RequestName: 'payment',
                                                            id: self
                                                                .field
                                                                .id
                                                        },
                                                        headers: {
                                                            'X-Requested-With': 'XMLHttpRequest'
                                                        }
                                                    }).then(res => {
                                                        if (res.data
                                                            .code ===
                                                            1) {
                                                            self.$messagebox({
                                                                title: "支付成功"
                                                            })
                                                                .then(
                                                                    rest => {
                                                                        window.location.href = "{:url('user/mypublish')}"
                                                                        // javascript: history
                                                                        //     .go(-
                                                                        //         1
                                                                        //     )
                                                                    }
                                                                );
                                                        }
                                                    })
                                                } else {
                                                    self.$messagebox(
                                                        "支付失败，请返回重试。");
                                                }
                                            },
                                            fail: function (res) {
                                                console.info(res)
                                                self.$messagebox(
                                                    "支付失败，请返回重试。");
                                            }
                                        });
                                    } else {
                                        javascript: history.go(-1)
                                    }

                                    // history.go(-1);
                                }
                            })
                        } else {
                            this.$messagebox(res.data.msg)
                        }
                    })
                },
                uploadPicture() {
                    let self = this
                    base64Image({
                        width: 750,                             /*【选填】宽度默认750，如果图片尺寸大于该宽度，图片将被设置为该宽度*/
                        ratio: 0.75,                            /*【选填】压缩率默认0.75 */
                        file: self.$refs.anchorUpload,                               /*【必填】对应的上传元素 */
                        callback: function (imageUrl) {         /*【必填】处理成功后的回调函数 */
                            /*imageUrl为得到的图片base64数据，这里可以进行上传到服务器或者其他逻辑操作 */
                            self.axiosPictrue(imageUrl)
                        },
                    });
                },
                axiosPictrue(base64String){
                    let self = this
                    let formdata = new FormData()
                    formdata.append('file', base64String)
                    axios({
                        method: "post",
                        url: "/api/common/uploadBase64",
                        data: formdata,
                        headers: {
                            "Content-Type": "multipart/form-data"
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.data.code == 1) {
                            self.field.images.push(res.data.data.url)
                            console.log(self.field.images)
                        } else {
                            alert("上传失败");
                        }
                    })
                }
            }
        })
        window.addEventListener('message', function (event) {
            // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
            var loc = event.data;
            if (loc && loc.module ==
                'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                index.$data.field.address = loc.poiname
                index.$data.field.detailedaddress = loc.poiaddress
                index.$data.field.longitude = loc.latlng.lng
                index.$data.field.latitude = loc.latlng.lat
                geocoder = new qq.maps.Geocoder({
                    complete: function (result) {
                        console.log(result.detail)
                        index.$data.mapAdress = result.detail
                        index.$data.field.province = result.detail.addressComponents
                            .province
                        index.$data.field.city = result.detail.addressComponents.city
                        index.$data.field.area = result.detail.addressComponents.district

                    }
                });
                var coord = new qq.maps.LatLng(loc.latlng.lat, loc.latlng.lng);
                geocoder.getAddress(coord);
                if (index.$data.field.longitude && index.$data.field.latitude) {
                    index.$data.isShowMap = false
                }
            }
        }, false);
    })
</script>